:root {
    --col_0: rgb(0,0,0);
    --col_1: rgb(1, 134, 158);
    --col_2: rgb(20, 146, 168);
    --col_3: rgb(41, 158, 179);
    --col_4: rgb(64, 171, 190);
    --col_5: rgb(90, 184, 201);
    --col_6: rgb(118, 197, 211);
    --col_7: rgb(149, 211, 222);
    --col_8: rgb(182, 225, 233);
    --col_9: rgb(217, 240, 244);
    --col_wht: rgb(255,255,255);
}

.color_0{color:var(--col_0)}
.color_1{color:var(--col_1)}
.color_2{color:var(--col_2)}
.color_3{color:var(--col_3)}
.color_4{color:var(--col_4)}
.color_5{color:var(--col_5)}
.color_6{color:var(--col_6)}
.color_7{color:var(--col_7)}
.color_8{color:var(--col_8)}
.color_9{color:var(--col_9)}
.color_wht{color:var(--col_wht)}

.bg_0{background-color:var(--col_0)}
.bg_1{background-color:var(--col_1)}
.bg_2{background-color:var(--col_2)}
.bg_3{background-color:var(--col_3)}
.bg_4{background-color:var(--col_4)}
.bg_5{background-color:var(--col_5)}
.bg_6{background-color:var(--col_6)}
.bg_7{background-color:var(--col_7)}
.bg_8{background-color:var(--col_8)}
.bg_9{background-color:var(--col_9)}
.bg_wht{background-color:var(--col_wht)}

.bg_highlight{background-color:rgba(255,255,255,0.1)};


.lds-dual-ring {
            display: inline-block;
            width: 80px;
            height: 80px;
        }

            .lds-dual-ring:after {
                content: " ";
                display: block;
                width: 64px;
                height: 64px;
                margin: 8px;
                border-radius: 50%;
                border: 6px solid var(--col_wht);
                border-color: var(--col_0) transparent var(--col_0) transparent;
                animation: lds-dual-ring 1.2s linear infinite;
            }

        @keyframes lds-dual-ring {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(180deg);
            }
        }

        .lds-dual-ring-img {
            display: inline-block;
            width: 150px;
            height: 150px;
        }

            .lds-dual-ring-img:after {
                content: " ";
                display: block;
                width: 100px;
                height: 100px;
                margin: 8px;
                border-radius: 50%;
                border: 6px solid #fff;
                border-color: var(--col_1) var(--col_0) var(--col_1) var(--col_0);
                animation: lds-dual-ring 0.5s linear infinite;
            }

        @keyframes lds-dual-ring-img {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

/* Apply to the root element for viewport scrollbars */
/* Apply to a specific element */
/*.my-element {
  scrollbar-color: #555 #ccc;
  scrollbar-width: auto;
}*/

        html {
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Safari */
            -khtml-user-select: none; /* Konqueror HTML */
            -moz-user-select: none; /* Old versions of Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
            -o-user-select: none;
            
            scrollbar-color: var(--col_7) var(--col_1); /* thumb-color track-color */
            scrollbar-width: auto;
        }

        body {
            color: var(--col_wht);
            background: var(--col_0);
            background: linear-gradient(90deg, rgb(61,124,135) 1%, rgb(90,184,201) 50%, rgb(61,124,135) 100%);
            margin: 10px;
        }


        #topBox {
            background: rgb(90,184,201);
            /*background: linear-gradient(90deg, rgba(20,20,20,1) 1%, rgba(121,9,9,1) 41%, rgba(20,20,20,1) 100%);
        */}

        #keypad {
            color: var(--col_wht);
            background: var(--col_0);
            background: linear-gradient(90deg, rgb(61,124,135) 1%, rgb(90,184,201) 50%, rgb(61,124,135) 100%);
            margin: 0;
            min-width: 400px;
            max-width: 400px;
            width: 400px;
            margin: 0 auto 0 auto;
        }

        #keypad_pin {
            color: var(--col_wht);
            background: var(--col_0);
            background: linear-gradient(90deg, rgb(61,124,135) 1%, rgb(90,184,201) 50%, rgb(61,124,135) 100%);
            margin: 0;
            min-width: 400px;
            max-width: 400px;
            width: 400px;
            margin: 0 auto 0 auto;
        }

        #container {
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
            margin-bottom: 20px;
            min-width: 800px;
            max-width: 800px;
            width: 800px;
            /*border-radius: 10px;*/
             /* #5AB8C9; */ /* rgba(38,150,170,1);*/
        }

        .boxShape {
            min-width: 800px;
            max-width: 800px;
            width: 800px;
            background: transparent;
            margin: 0px auto 0px auto;
        }

        #topBar {
            min-width: 800px;
            max-width: 800px;
            width: 800px;
            border-radius: 10px;
            background: var(--col_0);
            background: linear-gradient(90deg, rgba(20,20,20,1) 1%, rgba(121,9,9,1) 41%, rgba(20,20,20,1) 100%);
            padding: 10px;
            display: inline-block;
            box-shadow: var(--col_0) 0px 0px 15px;
            margin: 0px auto 0px auto;
        }

        #pageContent {
            min-width: 800px;
            max-width: 800px;
            width: 800px;
            background-color: transparent;
            margin: 0px auto 0px auto;
        }

        .menuBtn {
            color: grey;
            background-color: rgb(20,20,20);
            padding: 2px;
            box-shadow: var(--col_wht) 0px 0px 2px;
            border-radius: 5px;
            cursor: pointer;
        }

        .genBtn {
            color: grey;
            background-color: transparent;
            padding: 2px;
            box-shadow: var(--col_0) 0px 0px 10px;
            border-radius: 5px;
            cursor: pointer;
        }

        .pageContentPages {
            padding: 0px;
            background: var(--col_5);
            border-radius: 10px;
        }

        .profileEditBack {
            background: var(--col_5);
            margin-top: 8px;
            border-radius: 10px;
        }

        .welcomeButtons {
            font-weight: bold;
            font-size:200%;
            vertical-align: middle;
            background-color:var(--col_2);
            height: 50px;
            border-radius:20px;
            margin: 0 auto 0 auto;
            border: none;
            cursor:pointer            
        }

        .memberAreaButtons {
            font-weight: normal;
            font-size:100%;
            vertical-align: middle;
            background-color:var(--col_2);
            height: 30px;
            border-radius:20px;
            margin: 0 auto 0 auto;
            border: none;
            cursor:pointer            
        }

        .addAreaButtons {
            font-weight: normal;
            font-size:100%;
            vertical-align: middle;
            background-color:var(--col_5);
            height: 30px;
            border-radius:20px;
            margin: 0 auto 0 auto;
            border: none;
            cursor:pointer            
        }

        .addAreaFullWidthInput {
            width:80%;
            margin: 0 auto 0 auto;
            background-color: transparent;
            border-bottom: 2px solid var(--col_7);
        }

        .overlayButtons {
            font-weight: normal;
            font-size:100%;
            vertical-align: middle;
            background-color:var(--col_6);
            height: 30px;
            border-radius:20px;
            margin: 0 auto 0 auto;
            border: none;
            cursor:pointer            
        }


        .fullWidthButton {
            width:80%;
            font-weight: bold;
            font-size:200%;
            vertical-align: middle;
            text-align: center;
            background-color:var(--col_2);
            height: 50px;
            border-radius:20px;
            margin: 0 auto 0 auto;
            border: none;
            cursor:pointer            
        }

        .fullWidthInput {
            width:80%;
            margin: 0 auto 0 auto;
            background-color: transparent;
            border-bottom: 2px solid var(--col_1);
        }

        .fullWidthInput_hist {
            width:80%;
            margin: 0 auto 0 auto;
            background-color: transparent;
            border-bottom: 2px solid var(--col_6);
        }

        .fullWidthInputLabel {
            width:80%;
            margin: 0 auto 0 auto;
            background-color: transparent;
            color: var(--col_1);
            font-weight: bold;
        }

        .fullWidthInputLabel_overlay {
            width:80%;
            margin: 0 auto 0 auto;
            background-color: transparent;
            color: var(--col_7);
            font-weight: bold;
        }

        

        .inputStyleFullWidth {
            color: var(--col_wht);
            width:100%;
            font-size: 200%;
            background-color: transparent;
            border:none;
        }

        .memberAreaProfilePic {
            width:80px;
            height:80px;
            background-color: var(--col_0);
            box-shadow: var(--col_0) 0px 0px 10px;
            border-radius:5000px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }        

        .mainMemberImage {
            width:250px;
            height:250px;
            background-color: var(--col_3);
            box-shadow: var(--col_0) 0px 0px 15px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius:15px;            
        }

        #optionOverlay {
            position:fixed;
            top:0px;
            left:0px;
            width:100%;
            min-width:100%;
            height:100%;
            min-height: 100%;
            background: rgba(0,0,0,0.5);
            z-index:2002;
        }

        #optionBox {
            /*margin: 60px auto 0px auto;
            width:720px;
            min-width:720px;
            max-width:720px;*/
            background: var(--col_2);
            box-shadow: var(--col_0) 0px 0px 8px;
            padding: 5px;
            border-radius: 8px;
            overflow-y: auto;
            overflow-x:hidden;
        }

        #optionOverlay2 {
            position:fixed;
            top:0px;
            left:0px;
            width:100%;
            min-width:100%;
            height:100%;
            min-height: 100%;
            background: rgba(0,0,0,0.5);
            z-index:2003;
        }

        #optionBox2 {
/*            margin: 30px auto 0px auto;
            width:720px;
            min-width:720px;
            max-width:720px;
*/          background: var(--col_2);
            box-shadow: var(--col_0) 0px 0px 8px;
            padding: 5px;
            border-radius: 8px;
            overflow: auto;
            /*overflow-x: auto;*/
        }        
        
        .optionsBackground {
            background: var(--col_1)
        }

        .detailInputBox {
            font-size:20px;
            padding-top:10px;
            padding-bottom:10px;
            width:inherit;
            color: var(--col_wht);
            border:1px solid var(--col_6);
            background:transparent;
        }